<script type="text/javascript">
{literal}               
    $(document).ready(function(){
        renderRealPaymentStatisticAjax();        
        $('#date_range').change(function() {
            renderRealPaymentStatisticAjax();        
        }); 
        $('#cashier_id').change(function() {
            renderRealPaymentStatisticAjax();
        });
        $('#department_id').change(function() {
            renderRealPaymentStatisticAjax();
        });
    }); 
{/literal}  
</script>
<div class="form_container">         
    <table cellpadding="0" cellspacing="0" style='width: 100%'>
        <tr>
            <td class="label" style="text-transform: uppercase; width: 120px;">
                {translate}Select date{/translate} 
            </td>       
            <td>
                <select id="date_range" style="width: 180px;">
                    {html_options options=$dayList}
                </select>               
            </td>
            <td class="label" style="text-transform: uppercase; width: 80px;">
                {translate}Cashier{/translate} 
            </td>           
            <td>
                <select id="cashier_id" style="width: 150px;">
                    <option value='0' label="{translate}All{/translate}" selected="selected">{translate}All{/translate}</option>
                    {html_options options=$cashierList selected=$currentCashierId}
                </select>               
            </td>
            <td class="label" style="text-transform: uppercase;">
                {translate}Department{/translate}
            </td>
            <td>
                <select id="department_id" style="width: 180px;">                   
                    {html_options options=$deptList selected=$selectedDept}
                </select>               
            </td>
            <td rowspan="2" style="width: 60px" >               
                <div id="innerLoading" style="display:none;">
                    <img src="{$base_uri}/images/ajax-loader.gif"/>
                </div>              
            </td>
        </tr>   
        <tr>
            <td id="choosen_day" colspan="6" class="field">&nbsp;</td>          
        </tr>
    </table>
</div>
<div id="content_ticket_item" style='margin-top: 10px;'>
                
</div>